<template>
  <el-card class="card-box" shadow="never">
    <common-title type='custom' title='B类项目概览' arrowTitle='全部'>
      <div class="right">
        <span>金额单位：万元</span>
        <el-select v-model="year" placeholder="请选择" size="small" style="width: 100px" @change='changeYear'>
          <el-option v-for="item in yearList" :key="item" :label="item" :value="item" />
        </el-select>
      </div>
    </common-title>

    <div class="content">
      <div class="total">
        <p>立项占用资金额度</p>
        <div>¥ {{roundToDecimal(statictisData?.approvalAmount - statictisData?.transferAmount)}}&nbsp;<span>万元</span></div>
      </div>

      <div class="build">
        <div class="permit">
          <div class="head">
            <p>立项批准金额/数量</p>
            <div>¥{{roundToDecimal(statictisData?.approvalAmount)}}<span>/ {{statictisData?.projectCount}} 项</span></div>
          </div>
          <ul class="foot">
            <li>
              <div>运营保障专项</div>
              <span>¥ {{roundToDecimal(statictisData?.operateItemAmount)}}</span>
            </li>

            <li>
              <div>创新研发专项</div>
              <span>¥ {{roundToDecimal(statictisData?.techInnovationItemAmount)}}</span>
            </li>

            <li>
              <div>EHS专项</div>
              <span>¥ {{roundToDecimal(statictisData?.ehsItemAmount)}}</span>
            </li>

            <li>
              <div>新产品开发与升级专项</div>
              <span>¥ {{roundToDecimal(statictisData?.newProductItemAmount)}}</span>
            </li>
          </ul>
        </div>
        <div class="property">
          <p>资产调拨金额</p>
          <div>¥{{roundToDecimal(statictisData?.transferAmount)}}</div>
        </div>
      </div>

      <div class="invest">
        <div class="sign">
          <p>项目投资附加费</p>
          <div>¥{{toWanUnit(roundToDecimal(statictisData?.investmentAdditionalFee))}}</div>
        </div>

        <div class="sign">
          <p>合同签订金额/数量</p>
          <div>¥ {{toWanUnit(roundToDecimal(contractData?.contractAmount))}}<span>/ {{contractData?.contractCount}} 项</span></div>
        </div>
      </div>

      <ul class="list-wrap list-left">
        <li>
          <p>付款金额</p>
          <div>¥{{toWanUnit(roundToDecimal(paymentData?.paymentAmount))}}</div>
        </li>

        <li>
          <p>预转固金额</p>
          <div>¥{{toWanUnit(roundToDecimal(paymentData?.beforeTransferAmount))}}</div>
        </li>

        <li>
          <p>正式转固金额</p>
          <div>¥{{toWanUnit(roundToDecimal(paymentData?.formalTransferAmount))}}</div>
        </li>
      </ul>

      <ul class="list-wrap list-right">
        <li>
          <p>项目验收金额/数量</p>
          <div>¥ {{toWanUnit(roundToDecimal(contractData?.acceptanceAmount))}}<span>/ {{contractData?.acceptanceCount}} 项</span></div>
        </li>

        <li>
          <p>质量材料到货批次数</p>
          <div>--</div>
        </li>

        <li>
          <p>隐蔽工程检查次数</p>
          <div>--</div>
        </li>
      </ul>
    </div>
  </el-card>

</template>

<script lang="ts" setup>
  import { ref, onMounted, } from "vue";
  import commonTitle from "./commonTitle.vue";
  import {
    getPaymentB,
    getStatictisB,
    getContractB
  } from "/@/api/board";
  import NotifMessage from "/@/utils/message/notification";
  import {roundToDecimal,toWanUnit} from  "/@/utils/func";
  const currentYear = new Date().getFullYear();
  const year = ref(currentYear)
  const yearList = [currentYear, currentYear - 1, currentYear - 2, currentYear - 3, currentYear - 4]
  const statictisData = ref({})
  const paymentData = ref({})
  const contractData = ref({})
  //获取项目数据
  const getStatictisData = async () => {
    try {
      const { code, data,message } = await getStatictisB(year.value);
      if (code === 200) {
        statictisData.value = data || {};
      }
      else{
        NotifMessage.error(message || "获取数据异常");
      }
    } catch (err) {
      console.log(err);
    }
  };

  //获取支付数据
  const getPaymentData = async () => {
    try {
      const { code, data,message } = await getPaymentB(year.value);
      if (code === 200) {
        paymentData.value = data || {};
      }
      else{
        NotifMessage.error(message || "获取数据异常");
      }
    } catch (err) {
      console.log(err);
    }
  };

  //获取合同数据
  const getContractData = async () => {
    try {
      const { code, data,message } = await getContractB(year.value);
      if (code === 200) {
        contractData.value = data || {};
      }
      else{
        NotifMessage.error(message || "获取数据异常");
      }
    } catch (err) {
      console.log(err);
    }
  };

  const changeYear =  async () => {
    getStatictisData();
    getPaymentData();
    getContractData()
  };

  onMounted(() => {
    getStatictisData();
    getPaymentData();
    getContractData()
  });
</script>

<style lang="scss" scoped>
  .card-box {
    width: 66%;
    border-radius: 8px;
    box-shadow: none !important;

    :deep(.el-card__body) {
      padding: 10px 12px 10px 2px;
    }

    .right {
      display: flex;
      align-items: center;

      span {
        font-size: 12px;
        color: #999999;
        margin-right: 16px;
      }

      :deep(.el-select) {
        line-height: 28px;

        .el-input--small {
          line-height: 28px;
        }

        .el-input__inner {
          border-color: #2A61FF;
          height: 28px;
          line-height: 28px;
          font-size: 12px;
          color: #2A61FF
        }

        .el-select__caret {
          color: #2A61FF;
        }

        .el-input__icon {
          line-height: 28px;
        }
      }
    }

    .content {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      padding-left: 12px;

      .total {
        width: 32%;
        height: 138px;
        background: url(../img/total_bg.png) no-repeat center;
        background-size: 100%;
        padding: 30px 0 30px 20px;
        border-radius: 12px;
        color: #FFFFFF;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        p {
          font-size: 16px;
          font-weight: 500;
          line-height: 22px;
        }

        div {
          font-size: 36px;
          font-weight: bold;
          line-height: 26px;

          span {
            font-size: 14px;
          }
        }
      }

      .build {
        width: 48%;
        position: relative;

        .permit {
          width: 100%;
          height: 138px;
          background: url(../img/permit_bg.png) no-repeat center;
          background-size: 100%;
          padding: 12px 16px;
          border-radius: 8px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          .head {
            p {
              font-size: 12px;
              font-weight: 500;
              margin-bottom: 10px;
            }

            div {
              font-size: 16px;
              font-weight: bold;

              span {
                margin-left: 5px;
                font-size: 12px;
                font-weight: 500;
                line-height: 20px;
              }
            }
          }

          .foot {
            display: flex;
            justify-content: space-between;
            align-items: center;

            li {
              div {
                font-family: Source Han Sans;
                font-size: 10px;
                color: #999999;
                margin-bottom: 4px;
              }

              span {
                font-size: 11px;
                font-weight: bold;
                color: #666666;
              }
            }

            li:not(:last-child) {
              width: 20%;
              background: url(../img/diver.png) no-repeat right center;
            }
          }
        }

        .property {
          position: absolute;
          top: 0;
          right: 0;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          width: 39%;
          border-radius: 8px;
          padding: 12px 0 12px 12px;
          background: linear-gradient(180deg, #BFD4FC 3%, #F2F5FC 100%);
          color: #333333;

          p {
            font-size: 12px;
            font-weight: 500;
          }

          div {
            font-size: 16px;
            font-weight: bold;
          }
        }
      }

      .invest {
        width: 18%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .sign {
          border-radius: 8px;
          padding: 12px 0 12px 12px;
          border-radius: 8px;
          background: #F2F5FC;

          p {
            font-size: 12px;
            line-height: 20px;
            color: #666666;
          }

          div {
            font-size: 14px;
            font-weight: bold;
            color: #333333;
            span {
              font-size: 12px;
              font-weight: 500;
              line-height: 20px;
              margin-left: 5px;
            }
          }
        }
      }

      .list-wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        margin-top: 8px;
        border-radius: 8px;
        background: #F2F5FC;

        li {
          p {
            font-size: 12px;
            line-height: 20px;
            color: #666666;
          }

          div {
            font-size: 14px;
            font-weight: bold;
            margin-top: 8px;
            color: #333333;

            span {
              font-size: 12px;
              font-weight: 500;
              line-height: 20px;
              margin-left: 4px;
            }
          }
        }

        li:not(:last-child) {
          width: 30%;
          background: url(../img/diver.png) no-repeat right center;
        }
      }

      .list-left {
        width: 32%;
      }

      .list-right {
        width: 67%;
      }
    }
  }
</style>
